<template>
    <el-col  :style="{height:heightLength+'px'}" class="el-left-menu" :span="3">
        <el-menu  background-color="#324157" text-color="#bfcbd9" :default-active="active" :active="active"  class="el-menu-vertical-demo"  router unique-opened>
            <el-submenu v-for="item in routeList" :key="item.id" :index="item.menuUrl">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.menuName}}</span>
                </template>
                <el-menu-item 
                        v-for="list in item.childPermissions"
                        :key="list.menuName" 
                        :index="list.menuUrl">
                    {{list.menuName}}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
var routerList = require('./router-leftBar.js');
export default {
  data () {
    return {
        active:'',
        routeList:routerList.default.routerList,   
        heightLength:''                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    }
  },
  created(){
       // this.leftPermission();

      this.heightLength = document.body.scrollHeight ;
  },
  mounted(){
       window.addEventListener('scroll', ()=>{
           let scrollHeight = document.body.scrollHeight;
             this.heightLength =scrollHeight-80
       })
  },
  methods:{
    leftPermission(){
        let url = CONSTANT.URL.USER.FINDUSERPERMISSIONS;
        let data = {};
        let param = JSON.stringify(data);
        
        common.requestAjax(url,param,null,(res)=>{
            this.routeList = res.data.bussData;
            let active = '/'+ this.$router.currentRoute.path.split('/')[1];
           console.log(active + '------ test');
            this.active = active;
        })
    },
    handleOpen(key, keyPath) {
       
    },
    handleClose(key, keyPath) {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
    .el-left-menu{
        height:1000px;
        position: fixed;
        left: 0;
        width: 206px;
    }
    .el-menu-vertical-demo{
        height: 100%;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding-top: 0px!important;
    }
    .el-menu-item{
        a{
            display: block;
            color: #bfcbd9;
        }
        &.is-active{
            a{
                color: #20a0ff;
            }
        }
    }
</style>
